<template>
	<mt-swipe :auto="4000" class="home_div">
        <mt-swipe-item v-for="(img,index) in imgs" :key="index">
        	<!-- 复用轮播图时，数据结构不同使用||兼容图片地址属性
        	如：<img :src="img.img||img.src"/> -->
          <img :src="img"/>
        </mt-swipe-item>
    </mt-swipe>
</template>
<script>
	export default {
		name:'my-swipe',
		props:['url'], // 请求路径
		data() {
			return {
				imgs:[ // 模拟数据
					require('@/assets/img/lunbo/1.jpg'),
	                require('@/assets/img/lunbo/2.jpg'),
	                require('@/assets/img/lunbo/3.jpg'),
	                require('@/assets/img/lunbo/4.jpg'),
	                require('@/assets/img/lunbo/5.jpg'),
	                require('@/assets/img/lunbo/6.jpg'),
	                require('@/assets/img/lunbo/7.jpg'),
	                require('@/assets/img/lunbo/8.jpg')
				], 
			}
		},
		created() {
			// 需要在引用处通过 url="接口路径"来
			/*this.$axios.get(this.url)
			.then(res =>{
				this.imgs = res.data.message;
			})
			.catch(err => console.log('获取轮播图失败',err));*/
		}
	}
</script>
<style scoped>
    /*轮播图高度*/
    .mint-swipe {
	    height: 200px;
	}
    /*图片自适应*/
    .home_div {
        overflow: hidden;
        position: relative;
    }
    .home_div img{
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
    }
</style>